<template>
  <div class="bulletinBoard parent-dom">
    <vuescroll :ops="ops" @handle-scroll="handleComplete">
      <ul class="project-list">
        <li class="project-item" v-for="(item,index) in projectList" :key="index">
          <div class="title">
            <h3 class="ellipsis">{{item.shortName}}</h3>
            <div class="switch">
              <div :class="['switch-l',item.is_active==1?'active':'']" @click="switch_project_status(1,item)">待办</div>
              <div :class="['switch-r',item.is_active==2?'active':'']" @click="switch_project_status(2,item)">已办</div>
              <span :class="['bg',item.is_active==1?'right-48':'left-48']"></span>
            </div>
          </div>
          <!--          代办-->
          <div v-show="item.is_active==1" class="top">
            <div class="title">待办：{{item.task_list.length||0}}</div>
            <div class="sort" @click="sort_task(item)">
              时间排序
              <i :class="item.sort?'sort-icon':'sort-icon-down'"></i>
            </div>
          </div>

          <div v-show="item.is_active==1" class="content">
            <div v-if="item.task_list.length==0" class="default-page-task">
              <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
              <p>暂无数据</p>
            </div>
                        <vuescroll :ops="ops2">
            <ul class="task-list">
              <li class="task-item" @click="openTaskDetals(val,'my_task_list',item.is_active)"
                  v-for="(val,i) in item.task_list" :key="i">
                <span v-if="val.taskProgress!=0">已完成:{{val.taskProgress}}%</span>
                <div class="ellipsis title ">
                  <!-- 进度汇报-->
                  <i v-if="val.progress==1" class="report"></i>
                  <!--  不是进度汇报，逾期了,里程碑任务-->
                  <i v-else-if="val.progress==2&&val.overdue&&val.taskType==1" class="overdue"></i>
                  <!--  不是进度汇报，逾期了,临时任务-->
                  <i v-else-if="val.progress==2&&val.overdue&&val.taskType==2" class="overdue_ls"></i>
                  <!--  不是进度汇报，正常,里程碑任务-->
                  <i v-else-if="val.progress==2&&!val.overdue&&val.taskType==1" class="normal"></i>
                  <!--  不是进度汇报，正常,临时任务-->
                  <i v-else-if="val.progress==2&&!val.overdue&&val.taskType==2" class="normal_ls"></i>
                  <!--  不是进度汇报,延期，零时任务             -->
                  <i v-else-if="val.progress==2&&val.delay&&val.taskType==2" class="delay_ls"></i>
                  <!--  不是进度汇报,延期，里程碑             -->
                  <i v-else-if="val.progress==2&&val.delay&&val.taskType==1" class="delay"></i>

                  <!-- 不是进度汇报，延期审批任务，零时任务-->
                  <i v-else-if="val.progress==2&&val.taskType==4&&val.taskType2==2" class="delay_ls"></i>
                  <!-- 不是进度汇报，延期审批任务，里程碑任务-->
                  <i v-else-if="val.progress==2&&val.taskType==4&&val.taskType2==1" class="delay"></i>
                  {{val.taskName}}
                </div>
                <div class="desc">
                  <div class="desc-left ellipsis">执行人：{{val.executeNames}}</div>
                  <div :class="['desc-right',val.overdue?'':'normal']">{{val.timeMsg}}</div>
                </div>
              </li>
            </ul>
                      </vuescroll>
          </div>

          <!--          代办-->
          <!--          已办-->
          <div v-show="item.is_active==2" class="top">
            <div class="title">已办：{{item.task_list.length||0}}</div>
          </div>

          <div v-show="item.is_active==2" class="content">
            <div v-if="item.task_list.length==0" class="default-page-task">
              <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
              <p>暂无数据</p>
            </div>
            <vuescroll :ops="ops2">
            <ul class="task-list">
              <li class="task-item task-item-has-done" v-for="(val,i) in item.task_list" :key="i"
                  @click="openTaskDetals(val,'my_task_list',item.is_active)">
                <div class="title">
                  <!-- 进度汇报-->
                  <i v-if="val.progress==1" class="report"></i>
                  <!--  不是进度汇报，逾期了,里程碑任务-->
                  <i v-else-if="val.progress==2&&val.overdue&&val.taskType==1" class="overdue"></i>
                  <!--  不是进度汇报，逾期了,临时任务-->
                  <i v-else-if="val.progress==2&&val.overdue&&val.taskType==2" class="overdue_ls"></i>
                  <!--  不是进度汇报，正常,里程碑任务-->
                  <i v-else-if="val.progress==2&&!val.overdue&&val.taskType==1" class="normal"></i>
                  <!--  不是进度汇报，正常,临时任务-->
                  <i v-else-if="val.progress==2&&!val.overdue&&val.taskType==2" class="normal_ls"></i>
                  <!--  不是进度汇报,延期，零时任务             -->
                  <i v-else-if="val.progress==2&&val.delay&&val.taskType==2" class="delay_ls"></i>
                  <!--  不是进度汇报,延期，里程碑             -->
                  <i v-else-if="val.progress==2&&val.delay&&val.taskType==1" class="delay"></i>

                  <!-- 不是进度汇报，延期审批任务，零时任务-->
                  <i v-else-if="val.progress==2&&val.taskType==4&&val.taskType2==2" class="delay_ls"></i>
                  <!-- 不是进度汇报，延期审批任务，里程碑任务-->
                  <i v-else-if="val.progress==2&&val.taskType==4&&val.taskType2==1" class="delay"></i>
                  <div class="left">{{val.taskName}}</div>
                  <div class="right">{{val.executeNames}}</div>
                </div>
              </li>
            </ul>
            </vuescroll>
          </div>
          <!--          已办-->
          <div class="add-task" @click="addTask(item)">
            <i></i>添加新任务
          </div>
          <span class="collection" @click="attentionFn(item)">
             <transition name="fade">
                <i :class="item.attention?'active':''"></i>
             </transition>
          </span>
        </li>
      </ul>
    </vuescroll>
    <!--    任务详情-->
    <transition name="fade">
      <div v-if="is_show_details">
        <taskDetails :data="data_taskDetails" @openTaskHandle="openTaskHandle"
                     @close="closeDetails"></taskDetails>
      </div>
    </transition>
    <!--    添加任务-->
    <transition name="fade">
      <addTask :data="data_addTask" v-if="data_addTask.is_show" @update="update_task"></addTask>
    </transition>
    <!--    任务处理-->
    <div v-if="taskHandle_is_show">
      <taskHandle :data="taskHandle_data" @close="closeTaskHandle" @end="taskHandle_end"></taskHandle>
    </div>
    <loading v-if="is_show_loading"></loading>
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'
  import taskDetails from '@/components/taskDetails'
  import addTask from '@/components/addTask'
  import taskHandle from '@/components/taskDetails/handle'
  import loading from '@/components/loading'
  export default {
    name: "list",
    components: {
      vuescroll, taskDetails,addTask,taskHandle,loading
    },
    data() {
      return {
        is_show_loading:true,
        sort:true,//排序 true:正序，false,倒叙
        ops: {
          vuescroll: {
            wheelDirectionReverse: true,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: true,//启用横屏滚动
            scrollingY: false,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '250px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px',//距离容器的距离
            keepShow: false,
          },
          bar: {
            background: '#cbd5df',
            keepShow: true,
            size: '6px',
            minSize: 0.1
          }
        },
        ops2: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
            initialScrollY: false,
            initialScrollX: false,
            verticalNativeBarPos: 'right',
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '200px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '-10px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        data_taskDetails: {
          // is_show_taskDetails: false,//是否显示任务详情
        },
        projectId: '',//获取当前projectID,
        attention: '',//是否关注。1关注
        projectList: [],
        is_show_details: false,
        taskHandle_is_show:false,//处理框是否显示
        data_addTask:{
          is_show:false,
          projectId:'',
        },
        taskHandle_data:{},
      }
    },
    watch: {
      $route() {
        if (this.$route.query.projectId == 'all') {
          this.projectId = '';
        } else {
          this.projectId = this.$route.query.projectId;
        }
        this.attention = this.$route.query.attention || '';
        this.projectViewList();
      },
    },
    created() {
      //获取当前projectID
      if (this.$route.query.projectId == 'all' || this.$route.query.projectId == undefined) {
        this.projectId = '';
      } else {
        this.projectId = this.$route.query.projectId;
      }
      //获取当前attention
      this.attention = this.$route.query.attention || '';
      this.projectViewList();
    },
    methods: {
      sort_task(item){
        item.sort=!item.sort;
        this.switch_project_status(1,item)
      },
      //添加任务后，更新任务列表
      update_task(){
        let  id=this.data_addTask.projectId;
        this.projectViewList();
        //请求该项目下的任务
      },
      //任务处理完成后的回调
      taskHandle_end(){
        //关闭任务详情框
        this.is_show_details = false;
        //关闭任务处理框
        this.taskHandle_is_show = false;
        this.projectViewList();
      },
      //打开处理框
      openTaskHandle() {
        //关闭任务详情框
        this.is_show_details = false;
        //打开任务处理框
        this.taskHandle_is_show = true;
      },
      // 关闭任务处理框
      closeTaskHandle() {
        //关闭任务处理框
        this.taskHandle_is_show = false;
        //打开任务详情
        this.is_show_details = true;
      },
      //添加任务
      addTask(item) {
        this.data_addTask.projectId = item.projectId;
        this.data_addTask.is_show=true;
      },
      //关注项目方法
      attentionFn(item) {
        console.log(item);
        this.$http.post('project/project/attention', {
          projectId: item.projectId,
          userId: this.$store.state.userInfo.userId,
        }).then((res) => {
          if (res.statusCode == 200) {
            item.attention = !item.attention;
            if (item.attention) {
              this.$message.success('关注成功')
            } else {
              this.$message.success('取消关注成功')
            }
          } else {
            this.$message.error(res.statusMsg);
          }
        });

      },
      handleComplete(v, h, n) {
        console.log(v);
        console.log(h)
      },
      //任务详情
      openTaskDetals(item, type, is_have) {
        if (is_have == 1) {
          //待办
          if (item.createUserId == this.$store.state.userInfo.userId) {
            //我指派的待办
            type = 'my_assign_list';
          }
          if (item.executeUserIds.indexOf(this.$store.state.userInfo.userId) != -1) {
            //我的任务待办
            type = 'my_task_list';
          }
        } else {
          //已办
          type = 'my_task_list_have';

        }
        console.log(item);
        this.taskHandle_data=item;
        this.taskHandle_data.taskId=item.taskId;
        this.taskHandle_data.reportCycle=item.reportCycle;
        this.taskHandle_data.limitTime=item.limitTime;
        this.is_show_details = true;
        // console.log(this.data_taskDetails);
        // this.data_taskDetails.is_show_taskDetails = true;
        this.data_taskDetails.taskId = item.taskId;
        this.data_taskDetails.reportCycle = item.reportCycle;
        this.data_taskDetails.limitTime = item.limitTime;
        this.data_taskDetails = item;
        this.data_taskDetails.type = type;
      },
      closeDetails() {
        this.is_show_details = false;
      },
      //项目看板接口
      projectViewList() {
        let _this = this;
        this.$http.get('/project/project/view/list',
          {
            params: {
              pageNum: 1,
              pageSize: 100,
              userId: this.$store.state.userInfo.userId,
              projectId: this.projectId,
              attention: this.attention,
            }
          }
        ).then(res => {
          if (res.statusCode == 200) {
            let list = res.data.list;
            list.map(function (item, index) {
              item.is_active = 1;//1代表代办。2代表已办
              item.sort=true;
              item.task_list=[];
              //请求该项目下的任务
              _this.$http.get('task/task/query/view', {
                params: {
                  flag: 3,
                  haveDone: item.is_active == 1 ? false : true,//true查询已办任务，false查询未办任务
                  pageNum: 1,
                  pageSize: 999,
                  userId: _this.$store.state.userInfo.userId,
                  projectId: item.projectId,
                  kanban:true,
                  kanBanLimitTimeSort:true
                }
              }).then(res => {
                if (res.statusCode == 200) {
                  item.task_list = res.data.list||[];
                } else {
                  _this.$message.error(res.statusMsg)
                }
              })
            });
            setTimeout(function () {
              _this.projectList = list;
              _this.is_show_loading=false;
            }, 500);
          } else {
            this.$messages.error(res.statusMsg);
          }
        })
      },
      //切换项目的状态 待办和已办
      switch_project_status(status, item) {
        item.is_active = status;
        //切换该项目下的任务 已办和，待办
        //请求该项目下的任务
        this.$http.get('task/task/query/view', {
          params: {
            flag: 3,
            haveDone: status == 1 ? false : true,//true查询已办任务，false查询未办任务
            pageNum: 1,
            pageSize: 999,
            userId: this.$store.state.userInfo.userId,
            projectId: item.projectId,
            kanban:true,
            kanBanLimitTimeSort:item.sort
          }
        }).then(res => {
          if (res.statusCode == 200) {
            item.task_list = res.data.list;
          } else {
            this.$message.error(res.statusMsg)
          }
        })
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .bulletinBoard {
    width: 100%;
    height: 100%;
    /*padding: 23px 0 25px 0;*/
    box-sizing: border-box;
    position: relative;
    .project-list {
      white-space: nowrap;
      height: 100%;

      .project-item {
        width: 320px;
        padding: 0 16px;
        box-sizing: border-box;
        height: calc(100% - 22px);
        display: inline-block;
        border-radius: 6px;
        background-color: #FFFFFF;
        margin-right: 24px;
        position: relative;

        .collection {
          position: absolute;
          width: 28px;
          height: 28px;
          background-color: #FFFFFF;
          border: 1px solid #eeeeee;
          border-radius: 6px 0 6px 0;
          right: 0;
          bottom: 0;
          cursor: pointer;

          i {
            position: absolute;
            background-image: url("../../../assets/img/project/start2.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 16px;
            height: 16px;
            bottom: 6px;
            right: 6px;
          }

          .active {
            background-image: url("../../../assets/img/project/start1.png");
          }
        }

        > .title {
          padding-left: 16px;
          padding-top: 24px;
          padding-bottom: 24px;
          position: relative;

          h3 {
            line-height: 1;
            font-size: 16px;
            color: #454a55;
            font-weight: 600;
            width: 130px;
          }

          .switch {
            position: absolute;
            width: 96px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            background-color: #f4f5f9;
            font-size: 12px;
            border-radius: 13px;
            right: 0;
            top: 18px;
            cursor: pointer;
            display: flex;
            color: #96a2aa;

            > div {
              position: absolute;
              width: 48px;
              height: 26px;
              z-index: 10;
            }

            .switch-l {
              left: 0;
            }

            .switch-r {
              right: 0;
            }

            > .active {
              color: #ffffff;
            }

            .bg {
              width: 48px;
              height: 26px;
              position: absolute;
              background-color: #0a52e4;
              border-radius: 13px;
              left: 0;
              top: 0;
              transition: 0.2s all;
            }


            .left-48 {
              transform: translateX(48px);
            }

            .right-48 {
              transform: translateX(0px);
            }
          }
        }

        > .top {
          width: 288px;
          height: 62px;
          position: absolute;
          background-color: #f2f6f9;
          font-size: 12px;
          line-height: 30px;
          padding: 16px;
          overflow: hidden;
          color: #7a8a94;

          > .title {
            float: left;
          }

          .sort {
            float: right;
            position: relative;
            padding-right: 10px;
            cursor: pointer;

            .sort-icon {
              position: absolute;
              top: 10px;
              right: 0;
              background-image: url("../../../assets/img/project/bullentinBoard/ic_rank_up.png");
              width: 6px;
              height: 8px;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .sort-icon-down {
              position: absolute;
              top: 10px;
              right: 0;
              width: 6px;
              height: 8px;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-image: url("../../../assets/img/project/bullentinBoard/ic_rank_down.png");
            }
          }
        }

        .content {
          margin-top: 62px;
          height: calc(100% - 62px - 64px - 48px);
          background: #f2f6f9;
          border-radius: 6px;
          padding: 0 16px;
          overflow: hidden;
          padding-bottom: 20px;
          .task-list {

            .task-item {
              width: 100%;
              height: 80px;
              background-color: #FFFFFF;
              border-radius: 6px;
              margin-bottom: 15px;
              padding: 16px;
              box-sizing: border-box;
              cursor: pointer;
              padding-top: 10px;
              position: relative;
              >span{
                right: 16px;
                top: 19px;
                position: absolute;
                color: #96a2aa;
                font-size: 12px;
              }
              > .title {
                width: 140px;
                font-size: 14px;
                color: #454a55;
                padding-left: 23px;
                position: relative;
                line-height: 30px;

                i {
                  position: absolute;
                  left: 0;
                  top: 9px;
                  width: 12px;
                  height: 12px;
                  background-image: url("../../../assets/img/project/bullentinBoard/1.png");
                  background-size: 12px 12px;
                  background-repeat: no-repeat;
                  background-position: center;
                }

                >.overdue{
                  background-image: url("../../../assets/img/task/ic_job_orange.png");
                }
                >.overdue_ls{
                  width: 17px;
                  height: 20px;
                  top: 6px;
                  background-size: 17px 20px;
                  background-image: url("../../../assets/img/task/ic_tem_yq.png");
                }
                >.report{
                  background-image: url("../../../assets/img/task/ic_hb_zc.png");
                }
                >.normal{
                  background-image: url("../../../assets/img/task/ic_job_blue.png");
                }
                >.normal_ls{
                  width: 14px;
                  height: 16px;
                  background-size: 14px 16px;
                  background-image: url("../../../assets/img/task/ic_tem_zc.png");
                }
                >.delay_ls{
                  width: 17px;
                  height: 20px;
                  top: 6px;
                  background-size: 17px 20px;
                  background-image: url("../../../assets/img/task/ic_yq_temporary.png");
                }
                >.delay{
                  width: 14px;
                  height: 16px;
                  top: 6px;
                  background-size: 14px 16px;
                  background-image: url("../../../assets/img/task/ic_yq_milestone.png");
                }
              }

              > .desc {
                overflow: hidden;
                padding-top: 10px;
                font-size: 14px;

                .desc-left {
                  float: left;
                  color: #96a2aa;
                  width: 50%;
                }

                .desc-right {
                  float: right;
                  color: #ff8f2b;
                  width: 50%;
                  text-align: right;
                }
                .normal{
                  color: #96a2aa;
                }
              }
            }

            .task-item-has-done {
              height: 44px;
              line-height: 44px;
              > .title {
                width: 100%;
                .left {
                  float: left;
                  text-align: left;
                  width: 130px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                .right {
                  width: 60px;
                  float: right;
                  text-align: right;
                  color: #96a2aa;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
            }
          }
        }

        /*::-webkit-scrollbar {*/
        /*  display: none*/
        /*}*/

        /*-ms-overflow-style: none; !* IE 10+ *!*/
        /*scrollbar-width: none; !* Firefox *!*/

        .add-task {
          width: 288px;
          height: 48px;
          line-height: 48px;
          font-size: 14px;
          color: #96a2aa;
          text-indent: 37px;
          position: absolute;
          bottom: 16px;
          left: 16px;
          background: #f2f6f9;
          cursor: pointer;
          i{
            position: absolute;
            width: 12px;
            height: 12px;
            left: 16px;
            top: 18px;
            background-image: url("../../../assets/img/add_new-job.png");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
          }
        }
      }
    }
  }
</style>
<style>
  .__view {
    height: 100% !important;
  }
</style>
